import { Canvas, Chart, Area, Line, Axis, Point } from "@antv/f2";
import { BOX8_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box8({ hasTitle = true }) {
  const center_data = [
    {
      type: 1,
      item: [
        { date: '2023-03-25', num: 4, service_num: 0 },
        { date: '2023-03-26', num: 3, service_num: 0 },
        { date: '2023-03-27', num: 1, service_num: 0 },
        { date: '2023-03-28', num: 4, service_num: 0 },
        { date: '2023-03-29', num: 1, service_num: 0 },
        { date: '2023-03-30', num: 0, service_num: 0 },
      ],
    },
    {
      type: 2,
      item: [
        { date: '2023-03-25', num: 4, service_num: 0 },
        { date: '2023-03-26', num: 0, service_num: 0 },
        { date: '2023-03-27', num: 1, service_num: 0 },
        { date: '2023-03-28', num: 4, service_num: 0 },
        { date: '2023-03-29', num: 1, service_num: 0 },
        { date: '2023-03-30', num: 1, service_num: 0 },
      ],
    },
    {
      type: 3,
      item: [
        { date: '2023-03-25', num: 2, service_num: 0 },
        { date: '2023-03-26', num: 3, service_num: 0 },
        { date: '2023-03-27', num: 0, service_num: 0 },
        { date: '2023-03-28', num: 2, service_num: 0 },
        { date: '2023-03-29', num: 2, service_num: 0 },
        { date: '2023-03-30', num: 1, service_num: 0 },
      ],
    },
    {
      type: 4,
      item: [
        { date: '2023-03-25', num: 0, service_num: 0 },
        { date: '2023-03-26', num: 0, service_num: 0 },
        { date: '2023-03-27', num: 4, service_num: 0 },
        { date: '2023-03-28', num: 2, service_num: 0 },
        { date: '2023-03-29', num: 2, service_num: 0 },
        { date: '2023-03-30', num: 3, service_num: 0 },
      ],
    },
    {
      type: 5,
      item: [
        { date: '2023-03-25', num: 0, service_num: 0 },
        { date: '2023-03-26', num: 2, service_num: 0 },
        { date: '2023-03-27', num: 2, service_num: 0 },
        { date: '2023-03-28', num: 2, service_num: 0 },
        { date: '2023-03-29', num: 1, service_num: 0 },
        { date: '2023-03-30', num: 4, service_num: 0 },
      ],
    },
  ]
  useEffect(() => {
    const context = document.getElementById("Box8")?.getContext("2d");
    if (!context) return
    const { offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={center_data[0].item}
          scale={{
            date: {
              range: [0, 1],
              type: "timeCat",
              mask: "MM-DD",
              tickCount: 5,
            },
            value: {
              max: 300,
              tickCount: 4,
            },
          }}
          style={{ top: 10 }}
        >
          <Axis field="num" />
          <Axis field="service_num" position="right" />
          <Axis
            field="date"
            tickCount={3}
            style={{
              label: { align: "between" },
            }}
          />
          <Area
            x="date"
            y="num"
            color="l(90) 0:#1890ff 1:#fff"
            adjust="stack"
          />
          <Area
            x="date"
            y="service_num"
            color="l(90) 0:#13c2c2 1:#fff"
            adjust="stack"
          />
          <Line x="date" y="num" color="#1890ff" shape="smooth" />
          <Line x="date" y="service_num" color="#13c2c2" shape="smooth" />
          <Point x="date" y="num" color="#1890ff" />
          <Point x="date" y="service_num" color="#13c2c2" />
          <group>
            <text
              style={{
                x: 10,
                y: 12,
                text: "开通检测站",
                textAlign: "left",
                fontSize: 8,
                fill: "#7f7f7f",
              }}
            ></text>
            <text
              style={{
                x: offsetWidth - 60,
                y: 12,
                text: "服务人次",
                fontSize: 8,
                fill: "#7f7f7f",
              }}
            ></text>
          </group>
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX8_NAME}</div>}
      <canvas className={styles.main} id="Box8"></canvas>
    </div>
  );
}
